<template>
    <h3><el-button type="primary" plain @click="goBack">返回</el-button> {{ route.query.firstName+"."+route.query.lastName }} 提供的图书</h3>
    
    <el-table :data="books" style="width: 100%">
        <el-table-column prop="id" label="ID" width="80" />
        <el-table-column prop="title" label="书名" width="480" />
        <el-table-column prop="genre" label="类别" width="200" />
        <el-table-column label="出版日期" width="300">
            <template #default="scope">
                <div>
                    {{ formatDate(scope.row.publishDate) }}
                </div>
            </template>
        </el-table-column>
    </el-table>
</template>
<script  setup>
import {reactive,onMounted} from "vue"
import { useRouter, useRoute } from 'vue-router'
import axios from '../axios'

const props=defineProps({
  id: String
})
const router = useRouter()
const route=useRoute()
const books=reactive([])

function goBack(){
    router.back()
}
onMounted(async ()=>{
    const resp=await axios.get("/api/authors/"+props.id+"/books")
    books.push(...resp.data);
})
function formatDate(s) {
    const date = new Date(s);
    const formatDate = date.toLocaleDateString('zh-CN', {
        year: 'numeric',
        month: 'long',
        day: 'numeric'
    });
    return formatDate;
}



</script>